<template>
  <div class='employRoster'>
      
      
      <!-- 标题区域 开始 -->

      <section class="title">
          <h1>员工花名册</h1>
      </section>


      <!-- 标题区域 结束 -->


      <section class="form">

          <!-- 上表单  (精简信息) 开始-->
      
       <el-form 
		    :model="formTop"
        class='formTop'
        label-position="right"
        label-width="150px"
			 >

          <!-- 上表单 左边 开始-->
        <div class="formTop-left">
          <el-form-item label='业务单位'>
            <el-select clearable size='small' v-model="formTop.one.model" @change='yewudanweiChange(true)' style="width:30%">
              <el-option v-for='(k,i) in formTop.one.selectList' :key='i' :label="k.business_descr" :value='k.setid'></el-option>
            </el-select>
          </el-form-item> 


          <el-form-item label='部门'>
            <div data-type='部门' @mouseleave='visible.bumen = false' @mouseenter.stop='bumenHover'>
              <el-input readonly  @keyup.native.delete = 'emptyInputVal' data-type='部门' id='bumen' :disabled='!formTop.one.model' :value='formTop.one.model?handleEmptyValue(formTop.two.inputValue):"请先选择业务单位"' :on-icon-click='handleIconClick' @focus='handleIconClick' @keyup.enter.native.focus='handleIconClick'  size='small' icon="search" style="width:30%"></el-input>
                <i @click.stop= 'delInputVal' data-type='部门' class='close-x el-icon-circle-cross' v-show='visible.bumen'></i>
                <el-checkbox v-model='formTop.two.showIf' :disabled='!formTop.one.model' style="margin-left:10px">是否包含子部门</el-checkbox> 
            </div>
            
          </el-form-item> 

          <el-form-item label='发薪组织'>
           <div data-type='发薪组织' @mouseleave='visible.faxinzuzhi = false' @mouseenter.stop='bumenHover'>

              <el-input data-type='发薪组织'
              readonly 
              @keyup.native.delete = 'emptyInputVal'
              id='faxinzuzhi'
              @focus = 'handleIconClick'
              :on-icon-click='handleIconClick' 
              @keyup.enter.native='handleIconClick'
                size='small' icon="search" 
                :value='handleEmptyValue(formTop.three)'
                style="width:30%"></el-input>
               <i @click.stop= 'delInputVal' data-type='发薪组织' class='close-x el-icon-circle-cross' v-show='visible.faxinzuzhi'></i>

            </div>

          </el-form-item> 

          <el-form-item label='年龄'>
             
            <el-input size='small' min='0' type="number" v-model.number.trim="formTop.fouth[0]" style="width:14.2%"></el-input>
             -
            <el-input size='small' min='0' type="number" v-model.number.trim="formTop.fouth[1]" style="width:14.2%"></el-input>
          </el-form-item> 

          <el-form-item label='性别'>
            <el-checkbox-group v-model='formTop.five'>

              <el-checkbox label='男'>
              </el-checkbox>

              <el-checkbox label='女'>
                  
              </el-checkbox>
              
              <el-checkbox label='未知'>
                  
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item> 

          <el-form-item label='婚姻状况'>
            <el-checkbox-group v-model='formTop.six'>
              <el-checkbox label='已婚'></el-checkbox>
              <el-checkbox label='未婚'></el-checkbox>
              <el-checkbox label='离异'></el-checkbox>
              <el-checkbox label='丧偶'></el-checkbox>
              <el-checkbox label='未知'></el-checkbox>
            </el-checkbox-group>

          </el-form-item> 

          <el-form-item label='HR状况'>
            <el-select clearable size='small' v-model="formTop.seven.model" style="width:30%">
              <el-option v-for='(k,i) in formTop.seven.selectList' :label='k.hr_status_descr' :value='k.hr_status'></el-option>
            </el-select>
          </el-form-item> 

          <el-form-item label='政治面貌'>
            <el-select clearable size='small' v-model="formTop.eight.model" style="width:30%">
              <el-option v-for='(k,i) in formTop.eight.selectList'  :value='k.political_sta_chn' :label='k.political_sta_chn_desc'></el-option>
            </el-select>
          </el-form-item> 

          <el-form-item label='最高学历'>
            <el-select clearable v-model='formTop.nine.model' size='small' style="width:30%">
              <el-option v-for='(k,i) in formTop.nine.selectList' :value='k.highest_edu'></el-option>
            </el-select>

          </el-form-item> 

          <div>
           

            <span 
              v-show='!showAll'
              class="button"
              :class='{"is-select":showAll}'
              @click.stop='handleAllInfo'>全部搜索信息</span>

               <el-button @click.stop ='searchAjax' v-show='!showAll' style='margin:0 15px' type='primary'>搜索</el-button>

            <span v-show='!showAll' class='saveSearch' @click.stop='saveSearch'>保存当前搜索条件</span>
          </div>
        </div>

        <!-- 上表单 左边 结束-->



        <!-- 上表单 右边 开始-->

        <div class="formTop-right">
          <h2>最近使用的搜索条件</h2>
          <div>
            <p v-for='(k,i) in searchCheckList' v-if='searchCheckList.length'>
              <el-checkbox v-model='searchCheckModel[i]' @change='handleSearchCheck(i)' class='check'></el-checkbox>
              <span @click='spanClick(i)' class='name' :class='{select:searchCheckModel[i]}' :title='k.conditionName'>{{k.conditionName}}</span>
              <i @click.stop='deleteClick(i)' class='el-icon-circle-cross' style='color:#CECECE'></i>
            </p>
            
            <el-dialog
              title='提示'
              :visible.sync="visible2"
              :lock-scroll='false'
              size='tiny'
              v-model="visible2">
              <p style="padding:10px 0">确定删除该搜索条件吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary"  @click="sureDelete">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>

        <!-- 上表单 右边 结束-->


        <!-- 上表单  (精简信息) 结束-->

       </el-form>


        <!-- 下表单  (全部信息) 开始-->

      
        <el-form 
          :model="formBottom"
          class='formBottom'
          label-position="right"
          label-width="150px"
			  >
          <el-collapse-transition>

            <div class="transition-wrap" v-show='showAll'>

              <div class="formBottom-wrapper formBottom-one">

                <el-col :span='12'>
                  <el-form-item label='员工姓名'>

                    <div data-type='员工姓名'
                      @mouseleave='visible.yuangongxingming = false'
                      @mouseenter.stop='bumenHover'
                    >
                      
                      <el-input v-model='formBottom.one.left' data-type='员工姓名' style='width:75%' size='small'></el-input>
                          <i
                          @click.stop= 'delInputVal'
                          data-type='员工姓名'
                          style='left:68%' 
                          class='close-x el-icon-circle-cross'
                            v-show='visible.yuangongxingming'>
                          </i>
                          
                    </div>

                   </el-form-item>  
                </el-col>

                <el-col :span='12'>
                  <el-form-item label='员工ID'>

                  <div data-type='员工ID'
                    @mouseleave='visible.yuangongID = false' @mouseenter.stop='bumenHover'
                  >
                    
                    <el-input  style='width:75%' id='yuangongID' :value='handleEmptyValue(formBottom.one.right)' data-type='员工ID' :on-icon-click='handleIconClick' @keyup.enter.native='handleIconClick' size='small' icon="search"></el-input>
                      <i
                        @click.stop= 'delInputVal'
                        data-type='员工ID'
                        style='left:61%' 
                        class='close-x el-icon-circle-cross' v-show='visible.yuangongID'></i>
                        
                  </div>

                  </el-form-item>     
                </el-col>
                 

              </div>

              <div class="formBottom-wrapper formBottom-one">
  
                <el-col :span='12'>
                  <el-form-item label='身份证编号'>

                    <div data-type='身份证编号'
                      @mouseleave='visible.shenfenID = false' @mouseenter.stop='bumenHover'
                    >
                      
                      <el-input v-model='formBottom.two.left' data-type='身份证编号' size='small' style="width:75%"></el-input>
                      <i
                        @click.stop= 'delInputVal'
                        data-type='身份证编号'
                        style='left:67%' 
                        class='close-x el-icon-circle-cross' v-show='visible.shenfenID'></i>
                          
                    </div>

                  </el-form-item>  
                </el-col>
                

                <el-col :span='12'>
                    <el-form-item label='EAS编码' class="marginBottom-40">
                
                    <div data-type='EAS编码'
                      @mouseleave='visible.easID = false' @mouseenter.stop='bumenHover'
                    >
                      <el-input v-model='formBottom.two.right' data-type='EAS编码' size='small' style="width:75%"></el-input>
              
                      <i
                        @click.stop= 'delInputVal'
                        data-type='EAS编码'
                        style='left:67%' 
                        class='close-x el-icon-circle-cross' v-show='visible.easID'></i>
                          
                    </div>

                  </el-form-item>
                </el-col>

              </div>


             
              
              <div class="formBottom-wrapper formBottom-one">
                
                <el-col :span='12'>
                  <el-form-item label='员工类别'>
              
                    <el-select style='width:75%' clearable size='small' v-model='formBottom.three.left.model'>
                      <el-option v-for='(k,i) in formBottom.three.left.selectList' :key='i' :value='k.empl_class' :label='k.empl_class_desc'></el-option>
                    </el-select>
                 </el-form-item> 
                </el-col>
               


                <el-col :span='12'>
                  <el-form-item label='员工大类'>
                
                    <el-select style='width:75%' clearable v-model='formBottom.three.right.model' size='small'>
                      <el-option v-for='(k,i) in formBottom.three.right.selectList' :key='i' :value='k.c_posn_clan' :label='k.posn_clan_desc'></el-option>
                    </el-select>
                  </el-form-item>   
                </el-col>
                
              </div>

              <div class="formBottom-wrapper formBottom-one">
                <el-col :span='12'>
                  <el-form-item label='员工属性'>
                
                    <el-select style='width:75%' clearable v-model='formBottom.fouth.left.model' size='small'>
                      <el-option v-for='(k,i) in formBottom.fouth.left.selectList' :key='i' :value='k.c_empl_attr' :label='k.empl_attr_desc'></el-option>
                    </el-select>

                  </el-form-item> 
                </el-col>
                

                <el-col :span='12'>
                  <el-form-item label='员工属性子类'>
                
                    <el-select clearable v-model='formBottom.fouth.right.model' size='small' style="width:45%">
                      <el-option v-for='(k,i) in formBottom.fouth.right.selectList' :key='i' :label='k.empl_sub_attr_desc' :value='k.c_empl_sub_attr'></el-option>
                    </el-select>

                  </el-form-item>
                </el-col>
              </div>

              

              
              
              


              <div class="formBottom-wrapper formBottom-one">

               
              
                  <el-col :span='12'>
                     <el-form-item label='专业类别代码' class="marginBottom-40">
                        <el-select style='width:45%' clearable v-model='formBottom.five.left.model' size='small'>
                        <el-option 
                        v-for='(k,i) in formBottom.five.left.selectList'
                        :key='i'
                        :label='k.profss_tp_desc' 
                        :value='k.c_profss_tp_id'></el-option>
                      </el-select>
                    </el-form-item> 
                  </el-col>

                  <el-col :span='12'>
                      <el-form-item label='主要专业类别'>
                          <el-checkbox v-model='formBottom.five.right'></el-checkbox>
                      </el-form-item>
                  </el-col>
              </div>

              


              <div class="formBottom-wrapper formBottom-one">
                 <el-col :span='12'>
                    <el-form-item label='职务职责编码'>
                
                      <el-select 
                        clearable
                        @change='zhiwuzhizeChange'
                        v-model='formBottom.six.left.model'
                          size='small' style="width:75%">
                          <el-option
                          v-for='(k,i) in formBottom.six.left.selectList'
                          :label='k.job_func_desc'
                          :value='k.job_function'
                          :key='i'
                          ></el-option>
                        </el-select>
                    </el-form-item> 
                 </el-col>


                <el-col :span='12'>
                  <el-form-item label='职务副职责'>
                
                

                    <div data-type='职务副职责' @mouseleave='visible.zhiwufuzhize = false' @mouseenter.stop='bumenHover'>

                        <el-input 
                          readonly 
                          @keyup.native.delete = 'emptyInputVal'
                          data-type='职务副职责'
                          :disabled='!bh'
                          id='zhiwufuzhize'
                          :value='bh?handleEmptyValue(formBottom.six.right):"请先选择职务职责代码"'
                          :on-icon-click='handleIconClick'
                          @focus = 'handleIconClick'
                          @keyup.enter.native='handleIconClick' 
                          size='small' icon="search"
                          style="width:75%"
                          >
                        </el-input>

                        <i style='left:97%' @click.stop= 'delInputVal' data-type='职务副职责' class='close-x el-icon-circle-cross' v-show='visible.zhiwufuzhize'></i>
                    </div>

                  </el-form-item> 
                </el-col>
              </div>


              <div class="formBottom-wrapper formBottom-one">
                 <el-col :span='12'>
                   <el-form-item label='集团标准职级'>
              
                      <el-select clearable v-model='formBottom.seven.left.model' size='small' style="width:75%">
                        <el-option 
                          v-for='(k,i) in formBottom.seven.left.selectList'
                          :label='k.grp_lvl_descr'
                          :value='k.c_grp_supv_lvl'
                          :key='i'
                        >  
                        </el-option>
                      </el-select>
                      
                    </el-form-item> 
                 </el-col> 

                 <el-col :span='12'>
                    <el-form-item label='二级公司标准职级'>
                    
                      <el-select clearable v-model='formBottom.seven.right.model' size='small' style="width:75%">
                        <el-option
                        v-for='(k,i) in formBottom.seven.right.selectList'
                        :label='k.sta_lvl_descr'
                        :value='k.c_sta_supv_lvl'
                        :key='i'></el-option>
                      </el-select>
                    </el-form-item> 
                 </el-col> 
              </div>
              
              

              <div class="formBottom-wrapper formBottom-one">
                <el-col :span='12'>
                    <el-form-item label='高管身份' class="marginBottom-40">
                
                      <el-select clearable v-model='formBottom.eight.model' size='small' style='width:45%'>
                        <el-option v-for='(k,i) in formBottom.eight.selectList' :value='k.leader_type'></el-option>
                      </el-select>

                    </el-form-item> 
                </el-col>
                 
              </div>


              <div class="formBottom-wrapper formBottom-one">
                <el-col :span='12'>
                   <el-form-item label='海外人才'>
              
                    <el-select clearable v-model='formBottom.nine.left.model' size='small' style='width:45%'>
                      <el-option v-for='(k,i) in formBottom.nine.left.selectList' :value = 'k.c_ovsea_talent' :label='k.ovsea_talent_desc'></el-option>
                    </el-select> 

                  </el-form-item> 
                </el-col>
                <el-col :span='12'>

                  <el-form-item label='是否海外派遣'>
                    <el-checkbox v-model='formBottom.nine.right'></el-checkbox>
                  </el-form-item>
                </el-col>
              </div>

              


              

              <div class="formBottom-wrapper formBottom-one">
                <el-col :span='12'>
                  <el-form-item label='语言技能' class="marginBottom-40">
              
                    <el-select clearable v-model='formBottom.ten.left.model' size='small' style='width:75%' multiple>
                      <el-option v-for='(k,i) in formBottom.ten.left.selectList' :value='k.c_language_type_desc'></el-option>
                    </el-select>

                  </el-form-item> 
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='以前工作国家/地区'>
          
                      <el-select clearable v-model='formBottom.ten.right.model' size='small' style='width:45%'>
                        <el-option 
                        v-for='(k,i) in formBottom.ten.right.selectList'
                          :key='i'
                        :label='k.country_desc'
                          :value='k.country_code'></el-option>
                      </el-select>       

                    </el-form-item>
                </el-col>
              </div>

              


               


              <div>

                <el-form-item label='其他'>
          
                  <el-checkbox-group v-model='formBottom.tenone'>
                    <el-checkbox label='包含兼岗'></el-checkbox>
                    <el-checkbox label='独生子女证'></el-checkbox>
                    <el-checkbox label='特困人员'></el-checkbox>
                    <el-checkbox label='援疆'></el-checkbox>
                    <el-checkbox label='援藏'></el-checkbox>
                  </el-checkbox-group>
                </el-form-item> 

              </div>

              <div class="solong formBottom-wrapper formBottom-one">
                <el-col :span='16'>
                  <el-form-item label='特长'>
                    <el-input 
                      placeholder='关键词之间请用英文逗号隔开'
                      type="textarea"
                      :autosize="{ minRows: 4}"
                      v-model='formBottom.tentwo'
                      >
                    </el-input>
                  </el-form-item>
                 </el-col>
              </div>


              <div style='margin-top:15px'>

                <span 
                  class="button"
                  :class='{"is-select":!showAll}'
                  @click.stop='showAll=!showAll'>精简搜索信息</span>

                <el-button @click.stop='searchAjax' style='margin:0 15px' type='primary'>搜索</el-button>

                <span class='saveSearch' @click.stop='saveSearch'>保存当前搜索条件</span>
                

              </div>

            </div>

         </el-collapse-transition>

       </el-form> 

         
        
        <!-- 下表单  (全部信息) 结束-->



      </section>
      
      <section class='employRoster-table' v-show='tableShow'>
        <div class='table-color'></div>
          <div class="table-form">
             <form
                method="post"
                target='employRoster-list'
                :action='this.Axios.baseURI+"/reportExcel/empRosterExport"'
                id='downLoadForm'
                style='display:none'></form>
              
             <iframe style='display:none' name="employRoster-list" id="employRoster_hidden_frame"></iframe> 

                 
             <el-button type='success' :loading="donwLoadLoading" @click.stop = 'downLoadExcel'>导出excel表格</el-button>
          </div>
        <div class="table-select">
          <el-button @click.stop='showSelectDialog = true'>自定义表格内容<i class="el-icon-edit el-icon--right"></i></el-button>
        </div>
        
        
        <v-table  :tableOptionSelect='tableOptionAsync' :tableDatas='tableDatas'></v-table>
        <div class="fenye">
          <el-pagination
            
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNum"
           :page-size="page.pageSize"
          :page-sizes="[50, 100, 200, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          >

          </el-pagination>
        </div>
      </section>

      

      <v-dialog
        :dialogShowIf.sync='dialogShowIf'
        :type='type'
        :setid='setid'
        :bh = 'bh'
        @formTop_three = 'getTableSelected'
        @formTop_two = 'getTableSelected'
        @formBottom_one_left = 'getTableSelected'
        @formBottom_six_right = 'getTableSelected'
      >
      </v-dialog>

      <!-- 保存搜索规则 -->

      

      <!-- 自定义表格显示内容 -->

      <el-dialog 
        custom-class = 'dialog-check-wrap'
        title='表格显示的内容'
        :visible.sync="showSelectDialog"
        :lock-scroll='false'
        size='tiny'
        top='5vh'
       >
       <div class="dialog-check">
         <el-checkbox-group :min="1" v-model = 'tableOptionSelect'>
            <p v-for='(k,i) in tableOptionDatas' :key='i' class="list">
              <el-checkbox  :label='k.value'>{{k.label}}</el-checkbox>
              <span class="index">
                <img src='../../../static/images/icon_up.svg' :class='{disable:i==0}' @click.stop.lazy='upIndex(i)'>
                <img src='../../../static/images/icon_down.svg' :class='{disable:i==tableOptionDatas.length-1}'  @click.stop.lazy='downIndex(i)'>
              </span>
            </p>
          
        </el-checkbox-group>
  

       </div>
        

         <span slot="footer" class="dialog-footer">
          <el-button type='primary' @click.stop="handleSure">保 存</el-button>
        </span>

      </el-dialog>

   

  </div>
</template>

<script>
import Vue from 'vue'
import Axios from 'axios'
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import VDialog from '@/components/employRoster/dialog'
import VTable from '@/components/employRoster/table'
import {
	MessageBox,
	Message,
	Button,
	Switch,
	Select,
	Input,
	RadioGroup,
	Radio,
	Option,
	Table,
	TableColumn,
	Form,
	FormItem,
	Checkbox,
	CheckboxGroup,
	Slider,
	Pagination,
	Col,
	Loading
} from 'element-ui'
Vue.use(Loading)
Vue.use(Button)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Slider)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Pagination)
Vue.use(Col)
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
	components: {
		VDialog,
		VTable
	},
	data() {
		return {
			loading2: false,
			visible: {
				bumen: false,
				faxinzuzhi: false,
				zhiwufuzhize: false,
				yuangongxingming: false,
				yuangongID: false,
				shenfenID: false,
				easID: false
			},
			visible2: false,
			dialogShowIf: false,
			tableShow: false,
			donwLoadLoading: false,
			formTop: {
				one: {
					model: '',
					selectList: []
				},
				two: {
					inputValue: {
						info: '',
						id: ''
					},
					showIf: false
				},
				three: {
					id: '',
					info: ''
				},
				fouth: ['', ''],
				five: [],
				six: [],
				seven: {
					model: '',
					selectList: []
				},
				eight: {
					model: '',
					selectList: []
				},
				nine: {
					model: '',
					selectList: []
				},
				ten: ''
			},
			formBottom: {
				one: {
					left: '',
					right: {
						id: '',
						info: ''
					}
				},
				two: {
					left: '',
					right: ''
				},
				three: {
					left: {
						model: '',
						selectList: []
					},
					right: {
						model: '',
						selectList: []
					}
				},
				fouth: {
					left: {
						model: '',
						selectList: []
					},
					right: {
						model: '',
						selectList: []
					}
				},
				five: {
					left: {
						model: '',
						selectList: []
					},
					right: false
				},
				six: {
					left: {
						model: '',
						selectList: []
					},
					right: {
						id: '',
						info: ''
					}
				},
				seven: {
					left: {
						model: '',
						selectList: []
					},
					right: {
						model: '',
						selectList: []
					}
				},

				eight: {
					model: '',
					selectList: []
				},
				nine: {
					left: {
						model: '',
						selectList: []
					},
					right: ''
				},
				ten: {
					left: {
						model: '',
						selectList: []
					},
					right: {
						model: '',
						selectList: []
					}
				},
				tenone: [],
				tentwo: ''
			},
			showAll: false,
			ajaxFlag: true,
			type: null,
			showSelectDialog: false,
			tableOptionDatas: [],
			tableOptionSelect: [],
			tableOptionAsync: [],
			tableDatas: [],
			searchCheckModel: [],
			searchCheckList: [],
			searchCheckIndex: null,
			page: {
				pageNum: 1,
				pageSize: 50,
				total: 0
			}
		}
	},

	computed: {
		setid() {
			return this.formTop.one.model
		},
		bh() {
			return this.formBottom.six.left.model
		},
		tableSelectLabel() {
			let result = []
			this.tableOptionDatas.forEach((ele, index, arr) => {
				if (this.tableOptionSelect.includes(ele.value)) {
					result.push(ele)
				}
			})
      

			return result
		}
	},

	mounted() {
		const q = null

		this.getBaseData()
		this.getSearchData()
		this.getDetailData()
	},

	directive: {
		numberOnly: {
			bind() {
				this.handler = function() {
					this.el.value = this.el.value.replace(/\D+/, '')
				}.bind(this)
				this.el.addEventListener('input', this.handler)
			},
			unbind() {
				this.el.removeEventListener('input', this.handler)
			}
		}
	},

	methods: {
		upIndex(i) {
			if (i === 0) return
			var a = this.tableOptionDatas[i]

			this.tableOptionDatas.splice(i, 1, this.tableOptionDatas[i - 1])

			this.tableOptionDatas.splice(i - 1, 1, a)
		},

		downIndex(i) {
			const len = this.tableOptionDatas.length

			if (i === len - 1) return

			var a = this.tableOptionDatas[i]

			this.tableOptionDatas.splice(i, 1, this.tableOptionDatas[i + 1])

			this.tableOptionDatas.splice(i + 1, 1, a)
		},

		delInputVal(event) {
			let e = event ? event : window.event

			let target = e.target || e.srcElement

			let type = target.getAttribute('data-type')

			switch (type) {
			case '部门':
				this.formTop.two.inputValue.info = ''
				this.formTop.two.inputValue.id = ''

				break

			case '发薪组织':
				this.formTop.three.info = ''
				this.formTop.three.id = ''

				break

			case '职务副职责':
				this.formBottom.six.right.info = ''
				this.formBottom.six.right.id = ''
				break

			case '员工姓名':
				this.formBottom.one.left = ''

				break

			case '员工ID':
				this.formBottom.one.right.id = ''
				this.formBottom.one.right.info = ''
				break

			case '身份证编号':
				this.formBottom.two.left = ''
				break

			case 'EAS编码':
				this.formBottom.two.right = ''
				break

			default:
				break
			}
		},

		bumenHover(event) {
			let e = event ? event : window.event

			let target = e.target || e.srcElement

			let type = target.getAttribute('data-type')

			switch (type) {
			case '部门':
				if (this.formTop.one.model && this.formTop.two.inputValue.info) {
					this.visible.bumen = true
				}

				break

			case '发薪组织':
				if (this.formTop.three.info && this.formTop.three.id) {
					this.visible.faxinzuzhi = true
				}

				break

			case '职务副职责':
				if (
					this.formBottom.six.left.model &&
            this.formBottom.six.right.info
				) {
					this.visible.zhiwufuzhize = true
				}
				break

			case '员工姓名':
				if (this.formBottom.one.left) {
					this.visible.yuangongxingming = true
				}

				break

			case '员工ID':
				let val = document
					.querySelector('.employRoster')
					.querySelector('#yuangongID')
					.querySelector('input').value

				if (
					this.formBottom.one.right.id ||
            this.formBottom.one.right.info ||
            val
				) {
					this.visible.yuangongID = true
				}
				break

			case '身份证编号':
				if (this.formBottom.two.left) {
					this.visible.shenfenID = true
				}
				break

			case 'EAS编码':
				if (this.formBottom.two.right) {
					this.visible.easID = true
				}
				break

			default:
				break
			}
		},
		spanClick(i) {
			this.searchCheckModel.splice(i,1,!this.searchCheckModel[i])
			this.handleSearchCheck(i)
		},
		zhiwuzhizeChange(val, val2) {
			this.formBottom.six.right.id = ''
			this.formBottom.six.right.info = ''
		},

		yewudanweiChange() {
			this.formTop.two.inputValue.id = ''
			this.formTop.two.inputValue.info = ''
		},

		deleteClick(i) {
			this.visible2 = true
			this.searchCheckIndex = i
		},

		sureDelete() {
			this.visible2 = false
			let del = this.searchCheckList.splice(this.searchCheckIndex, 1)
			let params = {
				conditionName: del[0].conditionName
			}
			this.Axios.Post(this.URL.deleteCondition.url, params).then(res => {
				console.log(res, 'ress')
			})
		},

		handleSizeChange(val) {
			this.page.pageSize = val
			this.getTableData()
		},
		handleCurrentChange(val) {
			this.page.pageNum = val
			this.getTableData()
		},

		emptyInputVal(event) {
			let e = event ? event : window.event

			let target = e.target || e.srcElement

			// let type = target.offsetParent.getAttribute('data-type')
			let type = target.offsetParent.getAttribute('data-type')

			let t = this.formTop,
				d = this.formBottom

			switch (type) {
			case '部门':
				t.two.inputValue.id = '' //部门
				t.two.inputValue.info = '' //部门
				break

			case '发薪组织':
				t.three.id = ''
				t.three.info = ''
				break

			case '职务副职责':
				d.six.right.id = '' //职务副职责
				d.six.right.info = ''
				break

			default:
				break
			}
		},
		downLoadExcel() {
			// this.donwLoadLoading = true

			// setTimeout(() => {
			//   this.donwLoadLoading = false
			// }, 2000);

			let params = this.getParams()

			params.begin_age = params.begin_age == '' ? 0 : params.begin_age
			params.end_age = params.end_age == '' ? 0 : params.end_age

			let arrName = Object.keys(params)

			let arrVal = Object.values(params)

			let len = arrName.length

			let formTarget = document
				.querySelector('.employRoster')
				.querySelector('#downLoadForm')
			formTarget.innerHTML = ''

			for (let i = 0; i < len; i++) {
				let dom = document.createElement('input')
				dom.name = arrName[i]
				dom.value = arrVal[i]
				formTarget.appendChild(dom)
			}

			let tokenDom = document.createElement('input')
			tokenDom.name = 'token'
			tokenDom.value = localStorage.getItem('token')
			formTarget.appendChild(tokenDom)

			let selectArrDom = document.createElement('input')
			selectArrDom.name = 'showColumns'

			selectArrDom.value = JSON.stringify(this.handleToStatus(this.tableOptionSelect))
			formTarget.appendChild(selectArrDom)

			formTarget.submit()
			// let text = document.querySelector('#employRoster_hidden_frame')
			// text.onload = text.onreadystatechange = function () {
			//     console.log("wancheng");
			//     if (this.readyState && this.readyState != 'complete') return;
			//     else {
			//       console.log('xxx')
			//     }
			// }

			// console.log(text.contentWindow.document.body, 'text.document.body.innerHTML')
		},
		handleSearchCheck(i) {
			if (this.searchCheckModel[i]) {
				this.searchCheckModel.forEach((ele, index, arr) => {
					if (index !== i) arr[index] = false
				})

				let params = {
					conditionName: this.searchCheckList[i].conditionName
				}

				this.Axios.Post(this.URL.queryConditionDetail.url, params).then(res => {
					if (res.data.status == 1) {
						let t = this.formTop,
							d = this.formBottom,
							datas = res.data.datas

						setTimeout(() => {
							t.two.inputValue.id = datas.deptid //部门
							t.two.inputValue.info = datas.descr //部门
							d.six.right.id = datas.job_sub_func //职务副职责
							d.six.right.info = datas.job_sub_func_desc
						}, 100);

						(t.one.model = datas.setid), // 业务单位
						(t.two.showIf = !!parseInt(datas.whether_sub_department)), //是否显示子部门
						(t.three.id = datas.company), //发薪组织
						(t.three.info = datas.com_desc), //发薪组织
						(t.fouth[0] = datas.begin_age ==0?'':datas.begin_age), // 年龄开始
						(t.fouth[1] = datas.end_age==0?'':datas.end_age), // 年龄结束
						(t.five = datas.sex.split(',')), //性别
						(t.six = datas.mar_status.split(',')), // 婚姻状况
						(t.seven.model = datas.hr_status), //hr状态  A有效/I无效
						(t.eight.model = datas.political_sta_chn), //政治面貌
						(t.nine.model = datas.highest_edu), //最高学历
						(d.one.left = datas.name), //姓名
						(d.one.right.id = datas.emplid), //员工ID
						(d.one.right.info = datas.emplidName), //
						(d.two.left = datas.national_id), //身份证号码
						(d.two.right = datas.c_eas_emplid), //eas编码
						(d.three.left.model = datas.empl_class), //员工类别
						(d.three.right.model = datas.c_posn_clan), //员工大类
						(d.fouth.left.model = datas.c_empl_attr), //员工属性
						(d.fouth.right.model = datas.c_empl_sub_attr), //员工属性子类
						(d.five.left.model = datas.c_profss_tp_id), // 专业类别代码
						(d.five.right = !!parseInt(datas.major_professional_category)), //主要专业类别
						(d.six.left.model = datas.job_function), //职务职责代码
						(d.seven.left.model = datas.c_grp_supv_lvl), //集团标准职级
						(d.seven.right.model = datas.c_sta_supv_lvl), //二级公司标准职级
						(d.eight.model = datas.leader_type), //高管身份
						(d.nine.left.model = datas.c_ovsea_talent), //海外人才
						(d.nine.right = !!parseInt(datas.whether_ovsea)), //是否海外派遣
						(d.ten.left.model = datas.c_language_type_desc
							? datas.c_language_type_desc.split(',')
							: []), //语言技能
						(d.ten.right.model = datas.before_work_place), //以前工作的地区
						(d.tentwo = datas.c_speci_suit), //特长
						(d.tenone = [])

						if (datas.including_posts) d.tenone.push('包含兼岗')
						if (datas.c_one_child_cert) d.tenone.push('独生子女证')
						if (datas.c_special_poor) d.tenone.push('特困人员')
						if (datas.c_support_jiang) d.tenone.push('援疆')
						if (datas.c_support_zang) d.tenone.push('援藏')
					}
				})
			}
		},
		getSearchData() {
			this.Axios.Post(this.URL.queryBeforeCondition.url).then(res => {
				let list = res.data.datas.showList
				if (list.length) {
					this.searchCheckList = list
					list.forEach(element => {
						this.searchCheckModel.push(false)
					})
				}
			})
		},
		handleToStatus(arr){
			let result = []
			this.tableOptionDatas.forEach(ele=>{
				if(arr.includes(ele.value)){
					ele.status = true
				}else {
					ele.status = false
				}
				result.push(ele)
			})

			return result
		},
		handleSure() {
			this.showSelectDialog = false

			this.tableOptionAsync = this.tableSelectLabel
      

			let params = {
				showColumns: this.handleToStatus(this.tableOptionSelect)
			}
			this.Axios
				.Post(this.URL.saveOrUpdateShowColumn.url, params)
				.then(res => {
					if (res.data.status === 1) {
						Message({
							type: 'success',
							message: '保存成功'
						})
					}
				})
		},
		getBaseData() {
			this.Axios.Post(this.URL.getEmpRosterCondition.url).then(res => {
				let datas = res.data.datas
				this.formTop.one.selectList = datas.businessList
				this.formTop.nine.selectList = datas.highestEdeList //最高学历
				this.formTop.seven.selectList = datas.hrStatusList //HR状态
				this.formTop.seven.model = 'A'
				this.formTop.eight.selectList = datas.politicalStaList //政治面貌
			})
		},

		getDetailData() {
			this.Axios.Post(this.URL.getEmpRosterAgeinCondition.url).then(res => {
				let datas = res.data.datas

				this.formBottom.three.left.selectList = datas.emplClassList // 员工类别
				this.formBottom.three.right.selectList = datas.posnClanList // 员工大类

				this.formBottom.fouth.left.selectList = datas.emplAttrList // 员工属性
				this.formBottom.fouth.right.selectList = datas.emplSubAttrList // 员工属性子类

				this.formBottom.five.left.selectList = datas.profssTpList // 专业类别代码

				this.formBottom.six.left.selectList = datas.jobFunctionList // 职务职责代码
				this.formBottom.seven.right.selectList = datas.staSupvList // 二级公司标准职级
				this.formBottom.seven.left.selectList = datas.grpSupvList //   集团标准职级
				this.formBottom.nine.left.selectList = datas.ovseaTalentList //海外人才
				this.formBottom.ten.left.selectList = datas.languageList // 语言技能
				this.formBottom.ten.right.selectList = datas.countryList //以前工作国家/地区

				this.formBottom.eight.selectList = datas.leaderTypeList //  高管身份
			})
		},

		handleAllInfo() {
			this.showAll = !this.showAll
			if (this.showAll) {
				setTimeout(() => {
					window.scrollTo(0, 570)
				}, 300)
			}
		},
		getParams() {
			let t = this.formTop,
				d = this.formBottom,
				yuanGongIDVal,
				deptid,
				emplid,
				job_sub_func
			yuanGongIDVal = document
				.querySelector('.employRoster')
				.querySelector('#yuangongID')
				.querySelector('input')
				.value.replace(/[^0-9]/gi, '')

			let params = {
				setid: this.setid, // 业务单位
				deptid: t.two.inputValue.id, //部门
				whether_sub_department: t.two.showIf - 0, //是否显示子部门
				company: t.three.id, //发薪组织
				begin_age: t.fouth[0], // 年龄开始
				end_age: t.fouth[1], // 年龄结束
				sex: t.five.toString(), //性别
				mar_status: t.six.toString(), // 婚姻状况
				hr_status: t.seven.model, //hr状态  A有效/I无效
				political_sta_chn: t.eight.model, //政治面貌
				highest_edu: t.nine.model, //最高学历

				name: d.one.left, //姓名
				emplid: yuanGongIDVal, //员工ID
				national_id: d.two.left, //身份证号码
				c_eas_emplid: d.two.right, //eas编码

				empl_class: d.three.left.model, //员工类别
				c_posn_clan: d.three.right.model, //员工大类
				c_empl_attr: d.fouth.left.model, //员工属性
				c_empl_sub_attr: d.fouth.right.model, //员工属性子类
				c_profss_tp_id: d.five.left.model, // 专业类别代码
				major_professional_category: d.five.right - 0, //主要专业类别
				job_function: d.six.left.model, //职务职责代码
				job_sub_func: d.six.right.id, //职务副职责
				c_grp_supv_lvl: d.seven.left.model, //集团标准职级
				c_sta_supv_lvl: d.seven.right.model, //二级公司标准职级
				leader_type: d.eight.model, //高管身份
				c_ovsea_talent: d.nine.left.model, //海外人才
				whether_ovsea: d.nine.right - 0, //是否海外派遣
				c_language_type_desc: d.ten.left.model.toString(), //语言技能
				before_work_place: d.ten.right.model, //以前工作的地区
				c_speci_suit: d.tentwo, //特长
				including_posts: d.tenone.filter(ele => ele == '包含兼岗').length, //包含兼岗
				c_one_child_cert: d.tenone.filter(ele => ele == '独生子女证').length, //独生子女证
				c_special_poor: d.tenone.filter(ele => ele == '特困人员').length, //特困人员
				c_support_jiang: d.tenone.filter(ele => ele == '援疆').length, //援疆
				c_support_zang: d.tenone.filter(ele => ele == '援藏').length //援藏
			}

			return params
		},
		searchAjax() {
			this.Axios.Post(this.URL.getUserShowColumn.url).then(res => {
				const data = res.data.datas.showColumns
				this.tableOptionDatas = data
				this.tableOptionSelect = this.changeDatas(data)
				this.tableOptionAsync = this.tableSelectLabel

     
				this.getTableData()

			})

		},

		changeDatas(arr){
      
			if(arr.constructor === Array) {

				const filtetArr = arr.filter(ele=>ele.status)
				let result = []
				filtetArr.forEach(ele=>{
					result.push(ele.value)
				})


				return result
        
			}
			return []
		},


		getTableData() {
			const loding = Loading.service({
				target: document.querySelector('.content'),
				text: '正在加载中'
			})

			let params = this.getParams()

			params.pageNum = this.page.pageNum
			params.pageSize = this.page.pageSize
			params.token = localStorage.getItem('token')

			Axios.post(
				`${this.Axios.baseURI}${this.URL.queryEmpRosterList.url}`,
				params
			).then(res => {
				let datas = res.data.datas.showList
				this.tableDatas = datas
				this.tableShow = true
				const page = res.data.page
				this.page.pageNum = page.pageNum
				this.page.total = page.total

				loding.close()

				setTimeout(() => {
					window.scrollTo(0, document.body.scrollHeight)
				}, 300)
			})
		},

		handleIconClick(event) {
			let e = event ? event : window.event

			let target = e.target || e.srcElement
			if (
				!this.setid &&
        target.offsetParent.getAttribute('data-type') === '部门'
			)
				return

			if (
				!this.bh &&
        target.offsetParent.getAttribute('data-type') === '职务副职责'
			)
				return
			this.type = target.offsetParent.getAttribute('data-type')
			this.dialogShowIf = true
		},

		handleEmptyValue(data) {
			if (data.info !== undefined && data.id !== undefined) {
				if (data.info == '') {
					return `${data.id}`
				} else {
					return `${data.info} (${data.id})`
				}
			} else {
				return ''
			}
		},

		saveSearch() {
			MessageBox.prompt('请为该搜索条件命名', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /\S/,
				inputErrorMessage: '内容不能为空'
			})
				.then(({ value }) => {
					let t = this.formTop,
						d = this.formBottom

					let params = this.getParams()

					params.descr = t.two.inputValue.info

					params.com_desc = t.three.info

					params.emplidName = d.one.right.info

					params.job_sub_func_desc = d.six.right.info

					params.conditionName = value

					this.Axios.Post(this.URL.saveEmpRosterCondition.url, params).then(
						res => {
							if (res.data.status === 1) {
								this.searchCheckList.push({ conditionName: value })
								this.searchCheckModel.push(false)
								Message({
									type: 'success',
									message: '保存成功'
								})
							}
						}
					)
				})
				.catch(() => {})
		},

		getTableSelected(data) {
			switch (this.type) {
			case '发薪组织':
				this.formTop.three = data
				break

			case '部门':
				this.formTop.two.inputValue = data
				break

			case '员工姓名':
				this.formBottom.one.left = data
				break

			case '员工ID':
				this.formBottom.one.right = data
				break

			case '职务副职责':
				this.formBottom.six.right = data
				break

			default:
				break
			}
		}
	}
}
</script>


<style lang="less" >

.employRoster {
  .title {
    background-color: #fff;
    h1 {
      text-align: center;
      font-size: 20px;
      padding: 14px 0;
      border-bottom: 1px solid #f4f4f4;
    }
  }

  /* 表单 (主要内容)*/
  .form {
    /* 第一个表单 开始*/
    background-color: #fff;
    padding: 15px 20px;

    /* 公用样式开始*/

    .button {
      display: inline-block;
      padding: 5px 16px 4px 16px;
      border: 1px solid #bfcbd9;
      border-radius: 20px;
      margin: 1% 0 1% 8.5%;
      cursor: pointer;
      &:hover {
        color: #20a0ff;
        border-color: #0190fe;
      }
    }
    .button.is-select {
      color: #20a0ff;
      border-color: #0190fe;
    }

    .saveSearch {
      cursor: pointer;
      color: #41b883;
    }

    .marginLeft-10 {
      margin-left: 10%;
    }

    .marginLeft-12 {
      margin-left: 12.7%;
    }

    .marginLeft-8 {
      margin-left: 8%;
    }

    .marginBottom-40 {
      margin-bottom: 40px !important;
    }

    .close-x {
      position: absolute;
      top: 13px;
      left: 24.4%;
      color: #bfcbd9;
      background-color: #fff;
      cursor: pointer;
    }

    /* 公用样式结束*/

    .formTop {
      position: relative;

      .formTop-left {
        .tip {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -6px;
          font-size: 14px;
          line-height: 14px;
          color: #cecece;
        }
      }

      .formTop-right {
        position: absolute;
        right: 2%;
        top: 0;
        width: 26%;
        border: 2px solid #bfcbd9;
        ::-webkit-scrollbar {
          width: 0px;
        }

        & > h2 {
          background-color: #f5f5f6;
          color: #959595;
          text-align: center;
          font-size: 15px;
          font-weight: normal;
          padding: 6px 0;
        }

        & > div {
          height: 160px;
          overflow-y: auto;
          overflow-x: hidden;

          p {
            padding: 8px 0 8px 12px;
            position: relative;

            .check span {
              transform: scale(0.92);
            }
            span.name.select {
              color: #38f;
            }
            span.name {
              cursor: pointer;
              position: relative;
              top: 4px;
              left: 6px;
              font-size: 13px;
              display: inline-block;
              max-width: 170px;
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis;
            }
            i {
              position: absolute;
              right: 10px;
              margin-top: 6px;
              cursor: pointer;
              &:hover {
                transform: scale(1.2);
              }
            }
          }
        }
      }
    }

    /* 第一个表单 结束*/

    /* 第二个表单 开始*/
    .formBottom {
      .transition-wrap {
        padding: 7% 0 2% 0;
      }

      .formBottom-wrapper {
        overflow: hidden;
        width: 100%;
      }
    }
    /* 第二个表单 结束*/
  }

  .dialog-check-wrap {
    .el-dialog__body {
      padding: 20px 0 5px 0 !important;
    }
    .dialog-check {
      max-height: 400px;
      overflow: auto;

       p {
        padding: 5px 0;
        position: relative;
        position: relative;
        line-height: 30px;
        padding-left: 30px;
        .index {
          position: absolute;
          right: 20px;
          top: 50%;
          margin-top: -12px;
        }
        img {
          width: 22px;
          height: 22px;
          display: inline-block;
          color: #38f;
          cursor: pointer;
          margin: 0 2px;
        }
        .disable {
          cursor: not-allowed;
        }
      }

    
    }
  }

  /* 表格 (搜索结果)*/

  .employRoster-table {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    .table-color {
      background-color: #e4f0f5;
      height: 10px;
    }
    .table-form {
      display: inline-block;
      padding-top: 15px;
      padding-left: 15px;
    }
    .table-select {
      padding-top: 15px;
      padding-right: 15px;
      text-align: right;
      display: inline-block;
      float: right;
    }
    .fenye {
      padding-bottom: 30px;
      padding-left: 10px;
    }
  }

  /* UI样式修改*/

  // .el-form-item__label {
  //   width: 15%!important;
  // }
  .solong {
    .el-select {
      width: 430px !important;
      .el-input {
        min-height: 100px !important;

        input {
          min-height: 100px !important;
        }

        :-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #fff;
        }

        ::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #fff;
        }

        input:-ms-input-placeholder {
          color: #fff;
        }

        input::-webkit-input-placeholder {
          color: #fff;
        }
      }

      .el-select__tags {
        top: 2px;
        transform: translateY(0);
      }
    }
    .el-select-dropdown {
      min-width: 200px !important;
      max-width: 200px !important;
    }
    // i {
    //   display: none!important;
    // }
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-checkbox__inner {
    border-radius: 50% !important;
    border: 1px solid #bfcbd9 !important;
    background-color: #bfcbd9 !important;

    &::after {
      content: '';
      box-sizing: content-box !important;
      border: 2px solid #fff !important;
      border-left: 0 !important;
      border-top: 0 !important;
      height: 8px !important;
      left: 5px !important;
      position: absolute !important;
      top: 1px !important;
      -ms-transform: rotate(45deg) scaleY(1) !important;
      transform: rotate(45deg) scaleY(1) !important;
      width: 4px !important;
      transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s !important;
      -ms-transform-origin: center !important;
      transform-origin: center !important;
      z-index: 909999 !important;
    }
  }

  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      border: 1px solid #20a0ff !important;
      background-color: #20a0ff !important;
    }
  }
}
</style>
